<template>
    <div class="navbar">
        <el-row class="tac">
            <el-col>
                <el-menu
                :default-active="$route.path"
                :unique-opened="flag"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                router
                >
                    <sidebar-item/>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import SidebarItem from './SidebarItem'
export default {
  data () {
    return {
      flag: true
    }
  },
  components: { SidebarItem },
  computed: {
    routes () {
      return this.$router.options.routes
    }
  },
  mounted () {
    console.log(this.routes)
  },
  methods: {
    handleOpen (key, keyPath) {
    //   console.log('1', key, keyPath)
    },
    handleClose (key, keyPath) {
    //   console.log('2', key, keyPath)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.navbar{
    .tac{
        .el-submenu__title,.el-menu-item{
            text-align: left;
        }
        .el-menu-item.is-active{
            background: #edf5fe;
        }
        // .el-menu-padding{
            // padding-left:54px !important;
        // }
    }
}
</style>
